<template>
  <div class="con-box">
    <el-row type="flex" justify="end">
      <el-col>
        <el-button type="danger" @click="establish">创建采购单</el-button>
      </el-col>
    </el-row>
    <!-- 导航 -->
    <div class="uc-nav">
      <div class="nav-box">
        <div
          :class="['nav-item', sts == 0 ? 'active' : '']"
          @click="changeTab(0)"
        >
          <span class="text">全部采购清单</span>
          <i class="line"></i>
        </div>
        <div
          :class="['nav-item', sts == 1 ? 'active' : '']"
          @click="changeTab(1)"
        >
          <span class="text">待发送</span>
          <i class="line"></i>
        </div>
        <div
          :class="['nav-item', sts == 2 ? 'active' : '']"
          @click="changeTab(2)"
        >
          <span class="text">收集中</span>
          <i class="line"></i>
        </div>
        <div
          :class="['nav-item', sts == 3 ? 'active' : '']"
          @click="changeTab(3)"
        >
          <span class="text">已完成</span>
          <i class="line"></i>
        </div>
        <div
          :class="['nav-item', sts == 4 ? 'active' : '']"
          @click="changeTab(4)"
        >
          <span class="text">异常</span>
          <i class="line"></i>
        </div>
      </div>
    </div>
    <!-- /导航 -->

    <!-- 订单列表 -->
    <div class="order-list">
      <div class="order-table">
        <table cellspacing="0" cellpadding="0" class="box">
          <tbody>
            <tr class="box-tit">
              <th width="127">采购清单名称</th>
              <th width="127">采购单号</th>
              <th width="127">提报开始日期</th>
              <th width="147">提报截止日期</th>
              <th width="127">操作</th>
            </tr>
          </tbody>
          <tbody >
            <tr class="box-tr" v-for="(item,index) in page.records" :key="index">
              <td  >
                <div class="goods-info">
                  <div class="name-sku">
                    <span class="name">{{item.collaborativePurchase.name}}</span>
                  </div>
                </div>
              </td>
              <td>
                <span class="return-type">{{item.collaborativePurchase.id}}</span>
              </td>
              <td>
                <span>{{item.collaborativePurchase.startTime}}</span>
              </td>
              <td>
                <span>{{item.collaborativePurchase.endTime}}</span>
              </td>
              <td>
                <div class="action">
                  <nuxt-link
                    :to="{ path: '/user-center/xt-establish?id='+item.collaborativePurchase.id }"
                    class="action-btn default"
                    >编辑</nuxt-link
                  >
                  <nuxt-link
                    :to="{ path: '/user-center/xt-detail?id='+item.collaborativePurchase.id }"
                    class="action-btn default"
                    >查看</nuxt-link
                  >
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 空列表提示 -->
        <div class="empty" v-if="!page.records.length">
          <div class="img">
            <img src="~/assets/images/emptyPic/not-found.png" alt />
          </div>
          <div class="action">
            <div class="text">{{ $t('applyReturn.noRelatedRecords') }}</div>
            <nuxt-link to="/" class="btn">{{ $t('backToHome') }}</nuxt-link>
          </div>
        </div>
        <!-- /空列表提示 -->
      </div>
      <pagination
        v-model="page.current"
        :pages="page.pages"
        @changePage="getMyRefundOrder"
      ></pagination>
    </div>
    <!-- /订单列表 -->
  </div>
</template>

<script>
// import PageUtil from '~/plugins/pageUtil'
import Pagination from '~/components/pagination'
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      page: {
        records: [],
        total: 0, // 总条
        pages: 0, // 总页数
        current: this.$route.query.current, // 当前页数
        size: 5, // 每页显示多少条
        // rainbow: [], // 分页条
      },
      sts: 0, //申请类型: 0/null 全部 1仅退款 2退款退货
      type:9
    }
  },
  mounted() {
    // 设置网页标题
    document.title = '协同采购'

    this.getMyRefundOrder() //全部采购清单
  },
  methods: {
    //创建采购单
    establish() {
      this.$router.push({
        path: '/user-center/xt-establish',

      })
    },

    /**
     * 我的列表
     */
    getMyRefundOrder(current) {
      console.log(current)
      this.$axios
        .get('/p/cp/listCP/'+this.type, {
          params: {
            current:current?current: 1,
            size: 10,
          },
        })
        .then(({ data }) => {
          this.page = data
          // if (this.page.current !== undefined) {
          //   localStorage.setItem(
          //     'returnCurrent',
          //     JSON.stringify(this.page.current)
          //   )
          // }
        })
    },
    /**
     * 改变tab
     */
    changeTab(sts) {
      this.sts = sts //9全部 0 待发送 1 收集中 2 已完成 3 异常
      if(sts==0){
        this.type=9
      }else{
        this.type=sts-1
      }
      this.getMyRefundOrder()
    },
    /**
     * 撤销申请
     */
    cancelApply(refundSn) {
      this.$confirm(
        this.$i18n.t('applyReturn.refundReason11'),
        this.$i18n.t('applyReturn.tips'),
        {
          confirmButtonText: this.$i18n.t('determine'),
          cancelButtonText: this.$i18n.t('cancel'),
          type: 'warning',
        }
      )
        .then(() => {
          this.$axios
            .put('/p/orderRefund/cancel', refundSn)
            .then(({ data }) => {
              this.$message({
                message: this.$i18n.t('applyReturn.refundReason12'),
                duration: 1000,
                type: 'success',
              })
              setTimeout(() => {
                // this.$router.push({ path: '/user-center/uc-return' })
                this.getMyRefundOrder()
              }, 1000)
            })
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除',
          //   duration: 1000,
          // });
        })
    },
  },
}
</script>

<style scoped src='~/assets/css/uc-return.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
